<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加入我们 - 1024导航</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#8B5CF6',
                        accent: '#F59E0B',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .text-gradient {
                @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary;
            }
            .job-tag {
                @apply inline-block px-2 py-0.5 text-xs rounded-full bg-blue-100 text-blue-800;
            }
        }
    </style>
</head>

<body class="bg-gray-50 font-sans text-gray-800">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="text-primary text-2xl font-bold">1024<span class="text-secondary">导航</span></div>
                <span class="hidden md:inline-block text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded">v2.3</span>
            </div>

            <nav class="hidden md:flex items-center space-x-6">
                <a href="index.html" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                <a href="resources.html" class="text-gray-600 hover:text-primary transition-colors">资源</a>
                <a href="tools.html" class="text-gray-600 hover:text-primary transition-colors">工具</a>
                <a href="community.html" class="text-gray-600 hover:text-primary transition-colors">社区</a>
                <a href="about.html" class="text-primary font-medium">关于</a>
            </nav>

            <div class="flex items-center space-x-3">
                <button
                    class="hidden md:block px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                    <i class="fa fa-user-plus mr-1"></i> 登录
                </button>
                <button class="md:hidden text-gray-600 text-xl">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 页面标题 -->
    <section class="py-10 bg-gradient-to-b from-white to-gray-50 border-b border-gray-100">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold mb-4 text-gradient">加入我们</h1>
                <p class="text-gray-600">与1024导航一起成长，共同打造优质的互联网资源导航平台</p>
            </div>
        </div>
    </section>

    <!-- 职位详情区 -->
    <section class="py-10">
        <div class="container mx-auto px-4">
            <div class="max-w-5xl mx-auto">
                <!-- 返回按钮 -->
                <div class="mb-6">
                    <a href="about.html#join-us"
                        class="inline-flex items-center text-gray-600 hover:text-primary transition-colors">
                        <i class="fa fa-arrow-left mr-2"></i> 返回职位列表
                    </a>
                </div>

                <!-- 职位标题 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
                    <div class="flex flex-wrap justify-between items-start gap-4">
                        <div>
                            <h2 class="text-2xl font-bold mb-2">前端开发工程师</h2>
                            <p class="text-gray-600 mb-4">全职 | 经验1-3年 | 远程/北京</p>

                            <div class="flex flex-wrap gap-2 mb-4">
                                <span class="job-tag">HTML/CSS</span>
                                <span class="job-tag">JavaScript</span>
                                <span class="job-tag">React</span>
                                <span class="job-tag">Tailwind CSS</span>
                                <span class="job-tag">响应式设计</span>
                            </div>
                        </div>

                        <button
                            class="px-5 py-2.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                            立即申请
                        </button>
                    </div>
                </div>

                <!-- 职位详情 -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <div class="lg:col-span-2 space-y-8">
                        <!-- 职位描述 -->
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-xl font-bold mb-4 flex items-center">
                                <i class="fa fa-file-text-o text-primary mr-2"></i> 职位描述
                            </h3>
                            <ul class="space-y-3 text-gray-700">
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span>负责1024导航网站及相关产品的前端开发工作，实现高质量的用户界面</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span>与设计团队和后端开发团队紧密合作，确保产品体验的一致性和功能的完整性</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span>优化前端性能，提高页面加载速度和响应性</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span>参与产品需求讨论，提出前端技术实现方案和改进建议</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span>维护和更新现有代码，解决前端技术问题</span>
                                </li>
                            </ul>
                        </div>

                        <!-- 任职要求 -->
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-xl font-bold mb-4 flex items-center">
                                <i class="fa fa-list-ul text-primary mr-2"></i> 任职要求
                            </h3>
                            <ul class="space-y-3 text-gray-700">
                                <li class="flex items-start">
                                    <i class="fa fa-angle-right text-primary mt-1 mr-2"></i>
                                    <span>1-3年前端开发经验，本科及以上学历，计算机相关专业优先</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-angle-right text-primary mt-1 mr-2"></i>
                                    <span>精通HTML5、CSS3、JavaScript等前端基础技术，熟悉各种前端调试工具</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-angle-right text-primary mt-1 mr-2"></i>
                                    <span>熟悉至少一种前端框架（React优先），了解其原理和生态系统</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-angle-right text-primary mt-1 mr-2"></i>
                                    <span>熟悉Tailwind CSS等CSS框架，有UI组件库开发经验者优先</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-angle-right text-primary mt-1 mr-2"></i>
                                    <span>具有良好的代码风格和编程习惯，注重代码质量和可维护性</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-angle-right text-primary mt-1 mr-2"></i>
                                    <span>良好的沟通能力和团队协作精神，能够独立解决技术问题</span>
                                </li>
                            </ul>
                        </div>

                        <!-- 我们提供 -->
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-xl font-bold mb-4 flex items-center">
                                <i class="fa fa-gift text-primary mr-2"></i> 我们提供
                            </h3>
                            <ul class="space-y-3 text-gray-700">
                                <li class="flex items-start">
                                    <i class="fa fa-star text-accent mt-1 mr-2"></i>
                                    <span>有竞争力的薪酬待遇和期权激励</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-star text-accent mt-1 mr-2"></i>
                                    <span>灵活的工作时间，支持远程办公</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-star text-accent mt-1 mr-2"></i>
                                    <span>完善的社会保险和公积金</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-star text-accent mt-1 mr-2"></i>
                                    <span>定期团队建设活动和技术分享</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-star text-accent mt-1 mr-2"></i>
                                    <span>舒适的工作环境和必要的办公设备</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-star text-accent mt-1 mr-2"></i>
                                    <span>与优秀团队共同成长的机会</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- 侧边栏 -->
                    <div class="space-y-6">
                        <!-- 申请方式 -->
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-bold mb-4">申请方式</h3>
                            <p class="text-gray-600 mb-4">请将您的简历发送至我们的招聘邮箱，并注明应聘职位</p>
                            <div class="flex items-center p-3 bg-gray-50 rounded-lg mb-4">
                                <i class="fa fa-envelope text-primary mr-3"></i>
                                <span class="text-gray-700">hr@1024nav.com</span>
                            </div>
                            <button
                                class="w-full px-4 py-2.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                                立即申请该职位
                            </button>
                        </div>

                        <!-- 职位信息 -->
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-bold mb-4">职位信息</h3>
                            <div class="space-y-3 text-gray-700">
                                <div class="flex justify-between">
                                    <span class="text-gray-500">工作性质</span>
                                    <span>全职</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-500">工作经验</span>
                                    <span>1-3年</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-500">学历要求</span>
                                    <span>本科及以上</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-500">工作地点</span>
                                    <span>远程/北京</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-500">发布日期</span>
                                    <span>2023-06-15</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-500">截止日期</span>
                                    <span>2023-07-30</span>
                                </div>
                            </div>
                        </div>

                        <!-- 分享职位 -->
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-bold mb-4">分享职位</h3>
                            <div class="flex space-x-3">
                                <a href="#"
                                    class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-colors">
                                    <i class="fa fa-weixin"></i>
                                </a>
                                <a href="#"
                                    class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-colors">
                                    <i class="fa fa-weibo"></i>
                                </a>
                                <a href="#"
                                    class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-colors">
                                    <i class="fa fa-qq"></i>
                                </a>
                                <a href="#"
                                    class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-colors">
                                    <i class="fa fa-link"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 相关职位 -->
                <div class="mt-10">
                    <h3 class="text-xl font-bold mb-6">相关职位</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                            <h4 class="font-semibold text-gray-800 mb-2">产品经理</h4>
                            <p class="text-gray-600 text-sm mb-3">全职 | 经验2-4年 | 北京</p>
                            <div class="flex flex-wrap gap-2 mb-4">
                                <span class="job-tag">产品设计</span>
                                <span class="job-tag">用户研究</span>
                                <span class="job-tag">需求分析</span>
                            </div>
                            <a href="#" class="text-primary text-sm hover:underline">查看详情</a>
                        </div>
                        <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                            <h4 class="font-semibold text-gray-800 mb-2">UI/UX设计师</h4>
                            <p class="text-gray-600 text-sm mb-3">全职 | 经验1-3年 | 远程/上海</p>
                            <div class="flex flex-wrap gap-2 mb-4">
                                <span class="job-tag">界面设计</span>
                                <span class="job-tag">用户体验</span>
                                <span class="job-tag">Figma</span>
                            </div>
                            <a href="#" class="text-primary text-sm hover:underline">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 底部区域 -->
    <footer class="bg-gray-800 text-gray-300 py-10 mt-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-white text-lg font-semibold mb-4">1024导航</h3>
                    <p class="text-sm text-gray-400 mb-4">精选互联网优质资源，打造高效便捷的导航平台，助力你的工作与学习。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">快速链接</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="index.html" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="resources.html" class="text-gray-400 hover:text-white transition-colors">资源分类</a>
                        </li>
                        <li><a href="tools.html" class="text-gray-400 hover:text-white transition-colors">实用工具</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">最新收录</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">热门推荐</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">帮助支持</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用指南</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">资源提交</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">举报不良信息</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">关于我们</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="about.html" class="text-gray-400 hover:text-white transition-colors">网站介绍</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用条款</a></li>
                        <li><a href="join.html" class="text-gray-400 hover:text-white transition-colors">加入我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">免责声明</a></li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-sm text-gray-500">
                <p>© 2023 1024导航. 本站资源仅供学习交流使用，如有侵权请联系删除。</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="backToTop"
        class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
        <i class="fa fa-arrow-up"></i>
    </button>

    <script>
        // 回到顶部按钮功能
        const backToTopBtn = document.getElementById('backToTop');

        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTopBtn.classList.remove('opacity-0', 'invisible');
                backToTopBtn.classList.add('opacity-100', 'visible');
            } else {
                backToTopBtn.classList.remove('opacity-100', 'visible');
                backToTopBtn.classList.add('opacity-0', 'invisible');
            }

            // 导航栏滚动效果
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('py-2', 'shadow');
                header.classList.remove('py-3', 'shadow-sm');
            } else {
                header.classList.add('py-3', 'shadow-sm');
                header.classList.remove('py-2', 'shadow');
            }
        });

        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // 申请按钮点击效果
        const applyButtons = document.querySelectorAll('button:contains("立即申请")');
        applyButtons.forEach(button => {
            button.addEventListener('click', () => {
                alert('在实际应用中，这里会打开简历上传或申请表单页面');
            });
        });
    </script>
</body>

</html>